<template>
    <div>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0?'mui-active':'' ]" data-wid="tab-top-subpage-1.html" v-for="item in cateList" :key="item.id" @click="getimgList(item.id)">
							{{item.title}}
						</a>
						
					</div>
				</div>

			</div>
			<ul class="imgbox">
				<router-link :to="'/home/photoinfo/'+item.id" v-for="item in list" :key="item.id" tag="li">
					<img v-lazy="item.img_url">
					<div class="infobox">
						<div class="info-title">
							<h1>{{item.title}}</h1>
						</div>
						<div class="info-zhaiyao">
							{{item.zhaiyao}}
						</div>
					</div>
				</router-link>
			</ul>
    </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
    data() {
        return {
			cateList:[],
			list:[]
        }
    },
	created() {
		this.getcate(),
		this.getimgList(0)
	},
    mounted() {
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
	methods: {
		getcate(){
			this.$http.get('http://www.liulongbin.top:3005/api/getimgcategory').then(result=>{
				if(result.body.status==0){
					result.body.message.unshift({title:'全部',id:0})
					this.cateList=result.body.message
				}
			})
		},
		getimgList(cateId){
			this.$http.get('http://www.liulongbin.top:3005/api/getimages/'+cateId).then(result=>{
				if(result.body.status==0){
					// console.log(result.body.message)
					this.list=result.body.message
				}
			})
		}
	},
}
</script>

<style lang="scss" scoped>
 * { touch-action: pan-y; 
 
    }
	
.imgbox{
	list-style: none;
	
	padding: 10px;
	margin: 0;
	padding-bottom: 0;
	li{
		background-color: #ccc;
		text-align: center;
		margin-bottom: 10px;
		box-shadow: 0 0 9px#999;
		position: relative;
		img{
			width: 100%;
			vertical-align: middle;
		}
		img[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
		}
		.infobox{
			color: white;
			background-color: rgba(0,0,0,0.4);
			text-align: left;
			position: absolute;
			bottom: 0;
			max-height: 84px;
			.info-title{
				h1{
					font-size: 14px;
				}
			}
			.info-zhaiyao{
				font-size: 13px;
			}
		}
	}
}

    // 修改样式   
</style>
